<template>
  <div>
    <Form ref="roleForm" :model="role" :rules="ruleValidate" label-position="right" :label-width="110">
      <Row :gutter="2">
        <h4>角色信息</h4>
        <Col span="12" push="3">
          <FormItem prop="v5" label="角色名称：">
            <Input type="text" v-model="role.v5" placeholder="请输入角色名称" clearable style="width: auto"/>
          </FormItem>
          <FormItem prop="v0" label="角色key：">
            <Input type="text" v-model="role.v0" prefix="ios-phone-portrait" placeholder="请输入角色key" clearable style="width: auto"/>
          </FormItem>
          <FormItem prop="v2" label="URL：">
            <Input type="text" v-model="role.v2" prefix="ios-contact" placeholder="请输入URL" clearable style="width: auto"/>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="租户：">
            <Select prefix="md-transgender" v-model="role.v1" style="width: auto">
              <Option v-for="item in domainList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="action：">
            <Select multiple prefix="md-transgender" v-model="role.v3" style="width: auto">
              <Option v-for="al in actionList" :value="al.value" :key="al.value">{{ al.label }}</Option>
            </Select>
          </FormItem>
          <FormItem prop="v4" label="suf：">
            <Input type="text" v-model="role.v4" prefix="ios-contact" placeholder="请输入suf" clearable style="width: auto"/>
          </FormItem>
        </Col>
      </Row>

      <h4>其他</h4>
      <FormItem :style="{padding: '0 400px'}">
        <Row>
          <Col span="8">
            <Button type="success" icon="md-checkmark" @click="handleSubmit">保存</Button>
          </Col>
          <Col span="8">
            <Button type="error" icon="md-return-left" @click="handleReset">重置</Button>
          </Col>
          <Col span="8">
            <Button type="warning" icon="md-close" @click="handleCloseTag">关闭</Button>
          </Col>
        </Row>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
export default {
  props: {
    tRole: {
      type: Object,
      default: () => null
    },
    routeName: String
  },
  name: 'OneRolePage',
  data () {
    return {
      actionList: [
        { label: 'GET', value: 'GET' },
        { label: 'POST', value: 'POST' },
        { label: 'PUT', value: 'PUT' },
        { label: 'DELETE', value: 'DELETE' }
      ],
      domainList: [],
      originalRole: null,
      role: { v1: 'a', v4: '.*' },
      ruleValidate: {
        v0: [
          { required: true, message: '角色key不能为空', trigger: 'blur' }
        ],
        v1: [
          { required: true, message: '租户不能为空', trigger: 'blur' }
        ],
        v2: [
          { required: true, message: 'URL不能为空', trigger: 'blur' }
        ],
        v3: [
          { required: true, message: 'action不能为空', trigger: 'blur' }
        ],
        v4: [
          { required: true, message: 'suf不能为空', trigger: 'blur' }
        ],
        v5: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    ...mapActions([
      'handleDomainList'
    ]),
    handleSubmit () {
      this.$refs.roleForm.validate(v => {
        if (v) {
          let { v1, v3 } = this.role
          if (!v1) {
            this.$Message.error('租户不能为空')
            return
          }
          if (!v3 || v3.length === 0) {
            this.$Message.error('action不能为空')
            return
          }
          //
          let r = { ...this.role }
          if (v3.length === 1) r.v3 = v3.toString()
          if (v3.length > 1) r.v3 = v3.toString().replace(/,/g, '|')
          this.$emit('submit', r)
        }
      })
    },
    handleReset () {
      if (this.originalRole) this.role = { ...this.originalRole }
      else this.role = { v1: 'a', v4: '.*' }
    },
    handleCloseTag () {
      let c = { name: this.routeName }
      if (this.tRole) c.query = this.tRole
      this.closeTag(c)
    },
    pullDomainList () {
      this.handleDomainList().then(data => {
        if (data) {
          data.forEach(d => {
            let dl = { value: d, label: d }
            this.domainList.push(dl)
          })
        }
      }).catch(err => console.log('错误：', err))
    }
  },
  created () {
    if (this.tRole) {
      let role = { ...this.tRole }
      role.v3 = role.v3.split('|') || []
      //
      this.originalRole = role
      this.role = { ...role }
    }
    this.pullDomainList()
  }
}
</script>
<style scoped>
  h4 {
    font-weight: 500;
    color: #6379bb;
    font-size: 15px;
    border-bottom: 1px solid #ddd;
    margin: 8px 10px 25px 10px;
    padding-bottom: 5px;
  }
</style>
